<template>
	<view class="cardstyle">
		<slot name="header"></slot>
		<view class="titlebox">
			<view class="imgbox" v-if="mode === 2">
				<image :src="imageUrl"></image>
			</view>
			<view v-if="mode === 3">
				<text style="color: #aaa;">{{ title }}</text>
			</view>
			<view v-else>
				<text>{{ title }}</text>
			</view>
		</view>
		<view class="adbox" v-if="mode === 3" style="margin-top: 5rpx;">
			<image 
				v-for="(img, idx) in images" 
				:key="idx" 
				:src="img" 
				mode="widthFix"
				class="ad-img"
			></image>
		</view>
		
		<view class="tipsbox">
			<text v-if="isTop" style="color: #f00;">置顶</text>
			<text style="color: #f00;" v-if="mode === 3">广告</text>
			<text>{{ author }}</text>
			<text v-if="count > 0">{{ count }}评</text>
			<view style="flex:1; display: flex; justify-content: flex-end;">
				<text>{{ date }}</text>
			</view>
		</view>
		<slot name="tips"></slot>
		<slot name="footer"></slot>
	</view>
</template>

<script>
	export default {
		name: "NewsView",
		props: {
			title: { 
				type: String, 
				default: "默认标题" ,
				},
			isTop: { 
				type: Boolean, 
				default: false ,
				},
			author: { 
				type: String, 
				default: "未知来源" ,
				},
			count: { 
				type: Number, 
				default: 0 ,
				},
			date: { 
				type: String, 
				default: "2025.10.01" ,
				},
			imageUrl: { 
				type: String, 
				default: "" ,
				},
			mode: { 
				type: Number, 
				default: 0 ,
				},
			images: { 
				type: Array, 
				default: () => [] 
				}
		},
		data() {
			return {};
		}
	};
</script>

<style>
	.cardstyle {
		padding: 10rpx;
		border-radius: 30rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		margin: 10rpx 0;
	}
	.titlebox {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		margin-left: 8rpx;
	}
	.imgbox {
		margin-right: 15rpx;
	}
	.imgbox image {
		width: 180rpx;
		height: 130rpx;
		border-radius: 8rpx;
	}
	.titlebox text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.5;
	}
	.tipsbox {
		display: flex;
		margin-left: 8rpx;
		align-items: center;
		font-size: 24rpx;
		color: #666;
	}
	.tipsbox text {
		margin-right: 20rpx;
	}
	.tipsbox text:last-child {
		margin-right: 0;
	}

	.adbox {
		display: flex;
		gap: 12rpx;
		padding: 0 8rpx;
	}
	.ad-img {
		width: 31%;
		height: 30rpx;
		border-radius: 8rpx;
	}
</style>